<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>股票数据分析系统</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; background-color: #f5f7fa; }

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .grid-item {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .grid-item:hover {
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }

        .chart-title {
            padding: 15px;
            font-size: 18px;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            color: #333;
        }

        .chart-container {
            height: 300px;
            padding: 10px;
        }

        @media (max-width: 1200px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 style="text-align: center; margin-bottom: 30px; color: #333;">股票数据分析系统</h1>

        <div class="grid-container">
            <!-- K线图 -->
            <div class="grid-item">
                <div class="chart-title">K线图</div>
                <div class="chart-container" id="klineChart"></div>
            </div>

            <!-- 成交量柱状图 -->
            <div class="grid-item">
                <div class="chart-title">成交量</div>
                <div class="chart-container" id="volumeChart"></div>
            </div>

            <!-- MACD指标图 -->
            <div class="grid-item">
                <div class="chart-title">MACD指标</div>
                <div class="chart-container" id="macdChart"></div>
            </div>

            <!-- RSI指标图 -->
            <div class="grid-item">
                <div class="chart-title">RSI指标</div>
                <div class="chart-container" id="rsiChart"></div>
            </div>

            <!-- KDJ指标图 -->
            <div class="grid-item">
                <div class="chart-title">KDJ指标</div>
                <div class="chart-container" id="kdjChart"></div>
            </div>

            <!-- OBV指标图 -->
            <div class="grid-item">
                <div class="chart-title">OBV指标</div>
                <div class="chart-container" id="obvChart"></div>
            </div>

            <!-- BOLL指标图 -->
            <div class="grid-item">
                <div class="chart-title">BOLL指标</div>
                <div class="chart-container" id="bollChart"></div>
            </div>

            <!-- ATR指标图 -->
            <div class="grid-item">
                <div class="chart-title">ATR指标</div>
                <div class="chart-container" id="atrChart"></div>
            </div>

            <!-- DMI指标图 -->
            <div class="grid-item">
                <div class="chart-title">DMI指标</div>
                <div class="chart-container" id="dmiChart"></div>
            </div>
        </div>
    </div>

    <script>
        // 初始化所有图表
        const charts = {
            klineChart: echarts.init(document.getElementById('klineChart')),
            volumeChart: echarts.init(document.getElementById('volumeChart')),
            macdChart: echarts.init(document.getElementById('macdChart')),
            rsiChart: echarts.init(document.getElementById('rsiChart')),
            kdjChart: echarts.init(document.getElementById('kdjChart')),
            obvChart: echarts.init(document.getElementById('obvChart')),
            bollChart: echarts.init(document.getElementById('bollChart')),
            atrChart: echarts.init(document.getElementById('atrChart')),
            dmiChart: echarts.init(document.getElementById('dmiChart'))
        };

        // 加载所有数据
        function loadAllData() {
            // 加载K线图数据
            $.ajax({
                url: 'http://127.0.0.1:10015/kline',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const values = data.map(item => [item[1], item[2], item[3], item[4]]);

                    charts.klineChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'cross' },
                            backgroundColor: 'rgba(245, 245, 245, 0.8)',
                            borderColor: '#ccc',
                            borderWidth: 1,
                            padding: 10,
                            textStyle: { color: '#000' }
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            boundaryGap: false,
                            axisLine: { lineStyle: { color: '#999' } },
                            axisLabel: { rotate: 45 }
                        },
                        yAxis: {
                            scale: true,
                            splitArea: { show: true, areaStyle: { color: ['rgba(250, 250, 250, 0.1)', 'rgba(200, 200, 200, 0.1)'] } },
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [{
                            name: 'K线',
                            type: 'candlestick',
                            data: values,
                            itemStyle: {
                                color: '#ef233c',
                                color0: '#22c55e',
                                borderColor: '#ef233c',
                                borderColor0: '#22c55e'
                            }
                        }]
                    });
                },
                error: () => alert('K线数据加载失败')
            });

            // 加载成交量数据
            $.ajax({
                url: 'http://127.0.0.1:10015/volume',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const volumeData = data.map(item => item[1]);

                    charts.volumeChart.setOption({
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' }
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            name: '成交量',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [{
                            name: '成交量',
                            type: 'bar',
                            data: volumeData,
                            itemStyle: { color: '#409eff' },
                            barMaxWidth: 30
                        }]
                    });
                },
                error: () => alert('成交量数据加载失败')
            });

            // 加载MACD数据
            $.ajax({
                url: 'http://127.0.0.1:10015/macd',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const difData = data.map(item => item[1]);
                    const deaData = data.map(item => item[2]);
                    const macdData = data.map(item => item[3]);

                    charts.macdChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [
                            {
                                name: 'DIF',
                                type: 'line',
                                data: difData,
                                lineStyle: { color: '#ff7d00' }
                            },
                            {
                                name: 'DEA',
                                type: 'line',
                                data: deaData,
                                lineStyle: { color: '#007dff' }
                            },
                            {
                                name: 'MACD',
                                type: 'bar',
                                data: macdData,
                                itemStyle: {
                                    color: function(params) {
                                        return params.value >= 0 ? '#ef233c' : '#22c55e';
                                    }
                                }
                            }
                        ]
                    });
                },
                error: () => alert('MACD数据加载失败')
            });

            // 加载RSI数据
            $.ajax({
                url: 'http://127.0.0.1:10015/rsi',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const rsiData = data.map(item => item[1]);

                    charts.rsiChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 100,
                            splitLine: {
                                lineStyle: {
                                    color: ['#eee']
                                }
                            },
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [{
                            name: 'RSI',
                            type: 'line',
                            data: rsiData,
                            lineStyle: { color: '#722ed1' },
                            markLine: {
                                data: [
                                    { yAxis: 70, name: '超买线', lineStyle: { color: '#f5222d' } },
                                    { yAxis: 30, name: '超卖线', lineStyle: { color: '#52c41a' } }
                                ]
                            }
                        }]
                    });
                },
                error: () => alert('RSI数据加载失败')
            });

            // 加载KDJ数据
            $.ajax({
                url: 'http://127.0.0.1:10015/kdj',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const kData = data.map(item => item[1]);
                    const dData = data.map(item => item[2]);
                    const jData = data.map(item => item[3]);

                    charts.kdjChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            min: 0,
                            max: 100,
                            splitLine: {
                                lineStyle: {
                                    color: ['#eee']
                                }
                            },
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [
                            {
                                name: 'K值',
                                type: 'line',
                                data: kData,
                                lineStyle: { color: '#ff7d00' }
                            },
                            {
                                name: 'D值',
                                type: 'line',
                                data: dData,
                                lineStyle: { color: '#007dff' }
                            },
                            {
                                name: 'J值',
                                type: 'line',
                                data: jData,
                                lineStyle: { color: '#722ed1' }
                            }
                        ]
                    });
                },
                error: () => alert('KDJ数据加载失败')
            });

            // 加载OBV数据
            $.ajax({
                url: 'http://127.0.0.1:10015/obv',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const obvData = data.map(item => item[1]);

                    charts.obvChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [{
                            name: 'OBV',
                            type: 'line',
                            data: obvData,
                            lineStyle: { color: '#13c2c2' }
                        }]
                    });
                },
                error: () => alert('OBV数据加载失败')
            });

            // 加载BOLL数据
            $.ajax({
                url: 'http://127.0.0.1:10015/boll',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const lowerData = data.map(item => item[1]);
                    const midData = data.map(item => item[2]);
                    const upperData = data.map(item => item[3]);

                    charts.bollChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [
                            {
                                name: '上轨',
                                type: 'line',
                                data: upperData,
                                lineStyle: { color: '#ff7d00' }
                            },
                            {
                                name: '中轨',
                                type: 'line',
                                data: midData,
                                lineStyle: { color: '#007dff' }
                            },
                            {
                                name: '下轨',
                                type: 'line',
                                data: lowerData,
                                lineStyle: { color: '#722ed1' }
                            }
                        ]
                    });
                },
                error: () => alert('BOLL数据加载失败')
            });

            // 加载ATR数据
            $.ajax({
                url: 'http://127.0.0.1:10015/atr',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const atrData = data.map(item => item[1]);

                    charts.atrChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [{
                            name: 'ATR',
                            type: 'line',
                            data: atrData,
                            lineStyle: { color: '#f7ba1e' }
                        }]
                    });
                },
                error: () => alert('ATR数据加载失败')
            });

            // 加载DMI数据
            $.ajax({
                url: 'http://127.0.0.1:10015/dmi',
                method: 'GET',
                success: (data) => {
                    const categoryData = data.map(item => item[0]);
                    const pdiData = data.map(item => item[1]);
                    const mdiData = data.map(item => item[2]);
                    const adxData = data.map(item => item[3]);

                    charts.dmiChart.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: categoryData,
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        yAxis: {
                            type: 'value',
                            axisLine: { lineStyle: { color: '#999' } }
                        },
                        series: [
                            {
                                name: '+DI',
                                type: 'line',
                                data: pdiData,
                                lineStyle: { color: '#ff7d00' }
                            },
                            {
                                name: '-DI',
                                type: 'line',
                                data: mdiData,
                                lineStyle: { color: '#007dff' }
                            },
                            {
                                name: 'ADX',
                                type: 'line',
                                data: adxData,
                                lineStyle: { color: '#722ed1' }
                            }
                        ]
                    });
                },
                error: () => alert('DMI数据加载失败')
            });
        }

        // 页面加载后执行
        $(document).ready(() => {
            loadAllData();

            // 窗口大小变化时重绘图表
            window.addEventListener('resize', () => {
                Object.values(charts).forEach(chart => chart.resize());
            });
        });
    </script>
</body>
</html>